<template>
  <div class="tree">
    <TreeHeader :title="title" :search-form="searchForm">
      <ElDropdown placement="bottom-start">
        <ElButton link>
          <ElIcon><Icon icon="vertical-more" /></ElIcon>
        </ElButton>
        <template #dropdown>
          <div style="margin: 0 10px">
            <ElDropdownMenu><ElCheckbox @change="handleSelectAll">选择全部</ElCheckbox></ElDropdownMenu>
            <ElDropdownMenu><ElCheckbox @change="handleExpandAll">展开全部</ElCheckbox></ElDropdownMenu>
            <ElDropdownMenu><ElCheckbox v-model="checkStrictlyRef">层级独立</ElCheckbox></ElDropdownMenu>
          </div>
        </template>
      </ElDropdown>
    </TreeHeader>
    <div style="margin-top: 10px; border: 1px solid #f2f3f5"></div>
    <ElScrollbar :style="{ height: `calc(100% - 95px)` }">
      <ElTree ref="treeRef" :filter-node-method="filterNode" v-bind="getAttrs">
        <template #default="{ node }">
          <span class="tree-node">
            <div>{{ node.label }}</div>
            <div class="action">
              <slot name="action"></slot>
            </div>
          </span>
        </template>
      </ElTree>
    </ElScrollbar>
  </div>
</template>

<script setup lang="ts" name="Tree">
import { computed, reactive, ref, useAttrs, watch } from "vue";
import { ElScrollbar, ElTree, ElDropdown, ElDropdownMenu, ElIcon, ElCheckbox, ElButton } from "element-plus";
import { Icon } from "@/components/Icon";
import { omit } from "lodash";
import TreeHeader from "../TreeHeader/index.vue";

const props = defineProps({
  title: {
    type: String
  },
  expandOnClickNode: {
    type: Boolean,
    default: false
  },
  nodeKey: {
    type: String,
    default: "id"
  },
  data: {
    type: Array
  },
  checkStrictly: {
    type: Boolean,
    default: true
  }
});
const checkStrictlyRef = ref(props.checkStrictly);
const treeRef = ref();
const attrs = useAttrs();
const defaultExpandedKeys = ref([]);
const getAttrs = computed(() => {
  return {
    ...attrs,
    ...omit(props, ["title", "checkStrictly"]),
    checkStrictly: checkStrictlyRef.value,
    defaultExpandedKeys: defaultExpandedKeys.value
  };
});
const searchForm = reactive({ text: "" });
watch(
  () => searchForm.text,
  val => {
    treeRef.value.filter(val);
  }
);

const handleSelectAll = value => {
  const nodeList = Object.values(treeRef.value.store.nodesMap);
  for (const node of nodeList) {
    node.checked = value;
  }
};
const handleExpandAll = value => {
  const nodeList = Object.values(treeRef.value.store.nodesMap);
  for (const node of nodeList) {
    node.expanded = value;
  }
};
const filterNode = (value: string, data, node) => {
  if (!value) return true;
  return node.label.includes(value);
};
const getCheckedKeys = () => treeRef.value.getCheckedKeys();
const setCheckedKeys = (keys: String[] | Number[], leafOnly?: Boolean) => treeRef.value.setCheckedKeys(keys, leafOnly);
defineExpose({ getCheckedKeys, setCheckedKeys });
</script>

<style scoped lang="scss">
.tree {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 8px;
  .tree-node {
    display: flex;
    justify-content: space-between;
    width: 100%;
    &:hover .action {
      display: block;
    }
    .action {
      display: none;
    }
  }
}
</style>
